<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p id="output"></p>
    <p id="output2"></p>
    <button type="button" onclick="myFunc()">Count</button>
    <p id="output3"></p>
    <script>
      //用闭包将全局变量设为局部（私有）
      // 初始化计数器
      var counter = 0;

      // 递增计数器函数
      function increment() {
        counter++;
      }

      // 调用increment() 3次
      increment();
      increment();
      increment();

      // 现在该计数器应为3
      document.getElementById("output").innerHTML = `计数器: ${counter}`;
      //上面的解决方案存在一个问题：页面上的任何代码都可以更改计数器，而无需调用increment()。

      //使用JavaScript嵌套函数
      function outer() {
        var counter1 = 0;

        function inner() {
          counter1++;
        }
        inner();
        return counter1;
      }
      document.getElementById("output2").innerHTML = `计数器是: ${outer()}`;

      //闭包
      var increment2 = (function () {
        var counter2 = 0;

        function inner2() {
          return ++counter2;
        }
        return inner2;
      })();

      function myFunc() {
        document.getElementById(
          "output3"
        ).innerHTML = `计数器是: ${increment2()}`;
      }
    </script>
  </body>
</html>
